<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git LFS 管理面板</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .card {
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.3s ease;
        }
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .btn-primary:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
        .table-responsive {
            max-height: 400px;
            overflow-y: auto;
        }
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .status-success {
            background-color: #28a745;
        }
        .status-error {
            background-color: #dc3545;
        }
        .status-warning {
            background-color: #ffc107;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1 class="mb-0"><i class="fas fa-cloud-download-alt me-2"></i>Git LFS 管理面板</h1>
            <p class="mb-0 opacity-75">简化 Git Large File Storage 管理的可视化工具</p>
        </div>
    </div>

    <div class="container">
        <!-- 快速操作区域 -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-bolt me-2"></i>快速操作</h5>
                    </div>
                    <div class="card-body">
                        <button class="btn btn-primary w-100 mb-3" onclick="installLFS()">
                            <i class="fas fa-download me-2"></i>一键 git lfs install
                        </button>
                        <div id="install-result" class="alert alert-info" style="display: none;">
                            <i class="fas fa-info-circle me-2"></i>
                            <span id="install-message"></span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-plus me-2"></i>添加追踪规则</h5>
                    </div>
                    <div class="card-body">
                        <div class="input-group">
                            <input type="text" class="form-control" id="pattern-input" 
                                   placeholder="输入文件模式，如 *.psd 或 *.zip">
                            <button class="btn btn-primary" type="button" onclick="addPattern()">
                                <i class="fas fa-plus"></i> 添加
                            </button>
                        </div>
                        <small class="text-muted">支持通配符，如 *.mp4, *.psd, assets/large/*</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- 状态显示区域 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-list me-2"></i>已追踪文件类型</h5>
                        <button class="btn btn-sm btn-outline-primary" onclick="refreshTrackedFiles()">
                            <i class="fas fa-sync-alt me-1"></i>刷新
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>文件模式</th>
                                        <th>大小</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="tracked-files">
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">
                                            <i class="fas fa-spinner fa-spin me-2"></i>加载中...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- LFS 状态区域 -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>LFS 状态</h5>
                    </div>
                    <div class="card-body">
                        <button class="btn btn-outline-secondary" onclick="getLFSStatus()">
                            <i class="fas fa-sync-alt me-2"></i>查看 LFS 状态
                        </button>
                        <pre id="lfs-status" class="mt-3 bg-light p-3 rounded" style="display: none;"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            refreshTrackedFiles();
        });

        // 安装 LFS
        async function installLFS() {
            const button = event.target;
            const originalText = button.innerHTML;
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>安装中...';
            button.disabled = true;

            try {
                const response = await fetch('/api/lfs/install', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                const result = await response.json();
                
                const resultDiv = document.getElementById('install-result');
                const messageSpan = document.getElementById('install-message');
                
                if (result.success) {
                    resultDiv.className = 'alert alert-success';
                    messageSpan.textContent = 'Git LFS 安装成功！';
                } else {
                    resultDiv.className = 'alert alert-danger';
                    messageSpan.textContent = `安装失败: ${result.stderr}`;
                }
                resultDiv.style.display = 'block';
            } catch (error) {
                const resultDiv = document.getElementById('install-result');
                const messageSpan = document.getElementById('install-message');
                resultDiv.className = 'alert alert-danger';
                messageSpan.textContent = `请求失败: ${error.message}`;
                resultDiv.style.display = 'block';
            } finally {
                button.innerHTML = originalText;
                button.disabled = false;
            }
        }

        // 添加追踪模式
        async function addPattern() {
            const pattern = document.getElementById('pattern-input').value.trim();
            if (!pattern) {
                alert('请输入文件模式！');
                return;
            }

            try {
                const response = await fetch('/api/lfs/track', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ pattern: pattern })
                });
                const result = await response.json();
                
                if (result.success) {
                    document.getElementById('pattern-input').value = '';
                    refreshTrackedFiles();
                    showToast('成功添加追踪规则', 'success');
                } else {
                    alert(`添加失败: ${result.stderr || result.error}`);
                }
            } catch (error) {
                alert(`请求失败: ${error.message}`);
            }
        }

        // 移除追踪模式
        async function removePattern(pattern) {
            if (!confirm(`确定要移除对 "${pattern}" 的追踪吗？`)) {
                return;
            }

            try {
                const response = await fetch('/api/lfs/untrack', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ pattern: pattern })
                });
                const result = await response.json();
                
                if (result.success) {
                    refreshTrackedFiles();
                    showToast('成功移除追踪规则', 'success');
                } else {
                    alert(`移除失败: ${result.stderr || result.error}`);
                }
            } catch (error) {
                alert(`请求失败: ${error.message}`);
            }
        }

        // 刷新已追踪文件列表
        async function refreshTrackedFiles() {
            const tbody = document.getElementById('tracked-files');
            tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted"><i class="fas fa-spinner fa-spin me-2"></i>加载中...</td></tr>';

            try {
                const response = await fetch('/api/lfs/tracked');
                const result = await response.json();
                
                if (result.success) {
                    if (result.data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">暂无追踪的文件类型</td></tr>';
                    } else {
                        tbody.innerHTML = '';
                        result.data.forEach(item => {
                            const row = `
                                <tr>
                                    <td><code>${item.pattern}</code></td>
                                    <td>${item.size || 'N/A'}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-danger" onclick="removePattern('${item.pattern}')">
                                            <i class="fas fa-trash"></i> 移除
                                        </button>
                                    </td>
                                </tr>
                            `;
                            tbody.innerHTML += row;
                        });
                    }
                } else {
                    tbody.innerHTML = '<tr><td colspan="3" class="text-center text-danger">加载失败</td></tr>';
                }
            } catch (error) {
                tbody.innerHTML = '<tr><td colspan="3" class="text-center text-danger">请求失败</td></tr>';
            }
        }

        // 获取 LFS 状态
        async function getLFSStatus() {
            const statusDiv = document.getElementById('lfs-status');
            statusDiv.style.display = 'block';
            statusDiv.textContent = '加载中...';

            try {
                const response = await fetch('/api/lfs/status');
                const result = await response.json();
                
                if (result.success) {
                    statusDiv.textContent = result.stdout || '暂无 LFS 状态信息';
                } else {
                    statusDiv.textContent = `获取状态失败: ${result.stderr}`;
                }
            } catch (error) {
                statusDiv.textContent = `请求失败: ${error.message}`;
            }
        }

        // 显示提示消息
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            toast.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }
    </script>
</body>
</html>